<template>
    <div class="city">
        <my-header :city="cityName"></my-header>
        <!-- 轮播图 -->
        <div class="carousel">
            <el-carousel>
                <el-carousel-item v-for="(item) in carouselImg" :key="item.index">
                <img :src="item.url" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 从这里开始写 -->
        <!-- 这里写该城市的旅游资讯 -->
		<div class="tourism">		
			<div class="lvyou">
				<p>浪漫海岸</p>
				<div class="jingdian">浪漫海岸的海景绝对是一流的。这里的沙滩很洁白，而沙子细腻得像盐粒，走在上面，仿佛是走在了柔软的绸缎上。
				一间间具有巴厘岛、马尔代夫特色的茅草屋矗立在沙滩上，令人仿佛置身于巴厘岛、马尔代夫。浪漫海岸打造了椰林海岸的独特美景，为此在景区
				内新补种5万多棵木麻黄树木，并在海边外围沙滩沿线新植国王椰500多棵，为沙滩增添更多的海景绿趣。浪漫海岸满足了情侣的所有幻想，在这纯粹
				的极致美景里，留下一生最美丽的倩影，许下一辈子的承诺，一定是情侣间最值得留恋的回忆！</div>
			</div>
			<div class="lvyou">
				<p>仙人洞</p>
				<div class="jingdian">仙人洞自然风景旅游区是一个森林瀑布集中分布区。该区除了分布着大片的杜鹃林、千亩竹海、原始森林和天然瀑布群，
				还有珍稀植物禾雀花。这里的杜鹃林全是野生的，花开时节，漫山红遍，十分壮丽；千亩竹林一片翠绿，清风摇曳，泛起碧波阵阵，令人心旷神怡；
				天然瀑布群不仅密集，有的落差还达到200多米，湍急的瀑布与周围的奇树异石、茫茫云海交相辉映。</div>
			</div>
			<div class="lvyou">
				<p>茂名森林公园</p>
				<div class="jingdian">广东茂名森林公园于2002年12月30日正式对外开放，历经十余载完善建设使得茂名森林公园由一个荒凉偏僻的茂坡林场
				发展到如今具有“全国科普教育基地”、“国家AAAA级旅游景区”、“全国青少年户外体育活动营地”、“全国野生动物保护科普教育基地”等光荣称号和
				具有较高知名度的旅游景区。</div>
			</div>
		</div>



        <!-- 这个是地方美食的轮播图   -->
        <div class="carouselMeishi">
            <el-carousel :interval="4000" type="card">
                <el-carousel-item v-for="(item) in carouselMeishi" :key="item.index">
                <img :src="item.url" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 这里写该城市的美食推荐 -->
		<div class="food">
			<div class="meishi">
				<p>何茂公什锦菜</p>
				<div class="msjieshao">
					何茂公什锦菜是一道茂名的汉族传统名菜，属于粤菜系，不仅颜色鲜艳、而且香脆美味、甜酸辣
					俱全，令人食之流连忘返。
				</div>
			</div>
			<div class="meishi">
				<p>九六鸡</p>
				<div class="msjieshao">
					九六鸡的制作讲究原材料和制作工序，首先鸡必须是精选农村阉鸡，制作白切鸡有一道工序是要浸水，
					时间不够或稍过，鸡的味道就会大打折扣，还有配鸡的香油，其调配手法有别于其它香油鸡，香而不燥，
					吃后不上火也是九六鸡的特色之一。
				</div>
			</div>
			<div class="meishi">
				<p>水东鸭粥</p>
				<div class="msjieshao">
					水东鸭粥是茂名的一道特色招牌菜，别说茂名人、电白人，即使广州、深圳的客人到水东吃过鸭粥后，也赞赏不已。
					正宗的水东鸭粥店经营品种十分简单，常常只提供粥、鸭和凉拌蔬菜，生意却能长盛不衰。水东鸭粥食之入口即化，
					齿颊留香；
				</div>
			</div>
		</div>
        <!-- 写到这里  下面是底部 和底部保持间隙-->
        <my-footer></my-footer>
           
    </div>
</template>

<script>
export default {
    name: 'Guangzhou',
    data() {
        return {
            carouselImg:[
                // 跟下面路径形式来加景点观光轮播图，加多少都可以
                { url: require("@/assets/maoming/maoming01.jpg")},
                { url: require("@/assets/maoming/maoming02.jpg")},
				{ url: require("@/assets/maoming/maoming03.jpg")}
            ],
            carouselMeishi:[
                // 跟下面路径形式来加地方美食轮播图，加多少都可以
                { url: require("@/assets/maoming/maoming04.jpg")},
                { url: require("@/assets/maoming/maoming05.jpg")},
                { url: require("@/assets/maoming/maoming06.jpg")}

            ],
            cityName:'茂名'
        }
    }

};
</script>

<style scoped>
.carousel {
    width: 800px;
    height: 360px;
    margin: 50px auto;
	margin-bottom: 10px;
}
.carousel img{
	max-width: 100%;
}
.carouselMeishi {
    margin: 0 auto;
    width: 1000px;
}
.carouselMeishi img {
    max-width: 100%;
    min-width: 100%;
}
.tourism {
    width: 1000px;
    /* background-color: #548615; */
    height: 350px;
    margin: 0 auto;
    font-family: NSimSun;

}
.food {
    width: 1000px;
    /* background-color: #55aaff; */
    height: 300px;
    margin: 50px auto;
    font-family: NSimSun;

}
.lvyou{
	width: 330px;
	height: 300px;
	/* font-size: 16px; */
	float: left;
	border-left: #999999 dashed 1px;
	border-right: #999999 dashed 1px;
}
.lvyou p{
	font-size: 28px;
	font-weight: bold;
	font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	display: block;
}
.jingdian{
	text-indent: 28px;
	margin-left: 26px;
	margin-right: 26px;
	font-size: 16px;
	font-weight: bold;
}
.meishi{
	margin-top: 20px;
	width:310px;
	height: 250px;
	float: left;
	background-color: #b8d8ff;
	opacity: 0.8;
	border-radius: 25px;
	margin-left: 15px;
}
.meishi p{
	font-size: 28px;
	font-weight: bold;
	font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	display: block;
	color: #000000;
}
.msjieshao{
	color: #000000;
	font-weight: bold;
	/* text-indent: 40px; */
}
</style>